<template>
    <div>
        <header>
            {{ name }}
        </header>
        <van-tabs v-model="active" :swipe-threshold="5" sticky @click="changeTab">
            <van-tab :title="item" v-for="item in tabs" :key="item.key">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad">
                    <order-list v-for="item in orderList" :key="item.orderId" :orderInfo="item"/>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {Tab, Tabs, List} from 'vant';
    import OrderList from './order-list'

    export default {
        components: {
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
            [List.name]: List,
            OrderList
        },
        data() {
            return {
                active: 0,
                loading: false,
                finished: false,
                page: {
                    pageIndex: 0,
                    pageSize: 10
                },
                tabs: ['全部', '未付款', '未发货', '未收货', '已完成'],
                orderList: [],
                name: ""
            };
        },
        mounted(){
            this.name = this.$route.query.name;
            this.orderList = [
                {
                    orderId: 201905301,
                    title: '2019-05-28订单号: 303881615887476706',
                    content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                    orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                    money: '￥19.90'
                },
                {
                    orderId: 201905302,
                    title: '2019-05-16订单号: 301354031677476706',
                    content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                    orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                    money: '￥53.90'

                },
                {
                    orderId: 201905303,
                    title: '2019-05-11订单号: 298556716167476706',
                    content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                    orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                    money: '￥153.50'
                },
                {
                    orderId: 201905304,
                    title: '2019-03-28订单号: 287354956989476706',
                    content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                    orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                    money: '￥96.90'
                },
                {
                    orderId: 201905305,
                    title: '2019-05-28订单号: 303881615887476706',
                    content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                    orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                    money: '￥19.90'
                },
                {
                    orderId: 201905306,
                    title: '2019-05-16订单号: 301354031677476706',
                    content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                    orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                    money: '￥53.90'

                },
                {
                    orderId: 201905307,
                    title: '2019-05-11订单号: 298556716167476706',
                    content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                    orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                    money: '￥153.50'
                },
                {
                    orderId: 201905308,
                    title: '2019-03-28订单号: 287354956989476706',
                    content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                    orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                    money: '￥96.90'
                }
            ]
        },
        methods: {
            changeTab(index) {
                this.finished = false;
                this.page.pageIndex = 0;
                this.page.pageSize = 10;
                //status根据index或是active取订单状态
                //todo   请求数据
                switch (index) {//模拟接口数据
                    case 1:
                        this.orderList = [
                            {
                                orderId: 201905301,
                                title: '2019-05-28订单号: 303881615887476706',
                                content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                                orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                                money: '￥19.90'
                            }
                        ];
                        break;
                    case 2:
                        this.finished = true;
                        this.orderList = [
                            {
                                orderId: 201905302,
                                title: '2019-05-16订单号: 301354031677476706',
                                content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                                orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                                money: '￥53.90'

                            }
                        ];
                        break;
                    case 3:
                        this.orderList = [
                            {
                                orderId: 201905303,
                                title: '2019-05-11订单号: 298556716167476706',
                                content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                                orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                                money: '￥153.50'
                            },
                            {
                                orderId: 201905304,
                                title: '2019-03-28订单号: 287354956989476706',
                                content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                                orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                                money: '￥96.90'
                            },
                            {
                                orderId: 201905305,
                                title: '2019-05-28订单号: 303881615887476706',
                                content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                                orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                                money: '￥19.90'
                            }
                        ];
                        break;
                    case 4:
                        this.orderList = [
                            {
                                orderId: 201905306,
                                title: '2019-05-16订单号: 301354031677476706',
                                content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                                orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                                money: '￥53.90'

                            },
                            {
                                orderId: 201905307,
                                title: '2019-05-11订单号: 298556716167476706',
                                content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                                orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                                money: '￥153.50'
                            },
                            {
                                orderId: 201905308,
                                title: '2019-03-28订单号: 287354956989476706',
                                content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                                orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                                money: '￥96.90'
                            }
                        ];
                        break;
                    default:
                        this.orderList = [{
                            orderId: 201905301,
                            title: '2019-05-28订单号: 303881615887476706',
                            content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                            orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                            money: '￥19.90'
                        },
                            {
                                orderId: 201905302,
                                title: '2019-05-16订单号: 301354031677476706',
                                content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                                orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                                money: '￥53.90'

                            },
                            {
                                orderId: 201905303,
                                title: '2019-05-11订单号: 298556716167476706',
                                content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                                orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                                money: '￥153.50'
                            },
                            {
                                orderId: 201905304,
                                title: '2019-03-28订单号: 287354956989476706',
                                content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                                orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                                money: '￥96.90'
                            },
                            {
                                orderId: 201905305,
                                title: '2019-05-28订单号: 303881615887476706',
                                content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                                orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                                money: '￥19.90'
                            },
                            {
                                orderId: 201905306,
                                title: '2019-05-16订单号: 301354031677476706',
                                content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                                orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                                money: '￥53.90'

                            },
                            {
                                orderId: 201905307,
                                title: '2019-05-11订单号: 298556716167476706',
                                content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                                orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                                money: '￥153.50'
                            },
                            {
                                orderId: 201905308,
                                title: '2019-03-28订单号: 287354956989476706',
                                content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                                orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                                money: '￥96.90'
                            }]
                }
            },
            onLoad() {
                //根据pageSize,pageIndex,status(根据active取订单状态)请求数据,根据返回数据控制finished和loading的值
                if(!this.active){//模拟请求数据
                    this.orderList = this.orderList.concat([{
                        orderId: 201905309,
                        title: '2019-05-28订单号: 303881615887476706',
                        content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                        orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                        money: '￥19.90'
                    },
                        {
                            orderId: 2019053010,
                            title: '2019-05-16订单号: 301354031677476706',
                            content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                            orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                            money: '￥53.90'

                        },
                        {
                            orderId: 2019053011,
                            title: '2019-05-11订单号: 298556716167476706',
                            content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                            orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                            money: '￥153.50'
                        },
                        {
                            orderId: 2019053012,
                            title: '2019-03-28订单号: 287354956989476706',
                            content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                            orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                            money: '￥96.90'
                        },
                        {
                            orderId: 2019053013,
                            title: '2019-05-28订单号: 303881615887476706',
                            content: '花印含氨基酸洗面奶女男补水保湿深层清洁毛孔学生控油日本洁面乳',
                            orderImg: '//img.alicdn.com/imgextra/i1/533325273/O1CN018WTI4v1op4zCCHrNN_!!0-item_pic.jpg_80x80.jpg',
                            money: '￥19.90'
                        },
                        {
                            orderId: 2019053014,
                            title: '2019-05-16订单号: 301354031677476706',
                            content: '黑白条纹四件套床单床上用品ins自然醒男女孩被套学生寝室三4件套',
                            orderImg: '//img.alicdn.com/imgextra/i4/49248917/TB2fSwyBKSSBuNjy0FlXXbBpVXa_!!49248917.jpg_80x80.jpg',
                            money: '￥53.90'

                        },
                        {
                            orderId: 2019053015,
                            title: '2019-05-11订单号: 298556716167476706',
                            content: '美特斯邦威细条纹衬衫男短袖2019新款夏季潮流超级无敌酷男生百搭港风衬衣男',
                            orderImg: '//img.alicdn.com/imgextra/i2/134363478/O1CN01AWu8P21bYy2fYobcW_!!134363478.jpg_80x80.jpg',
                            money: '￥153.50'
                        },
                        {
                            orderId: 2019053016,
                            title: '2019-03-28订单号: 287354956989476706',
                            content: '口口妙手撕面包整箱蛋糕点食品早餐好吃网红买一箱送休闲的小零食',
                            orderImg: '//img.alicdn.com/imgextra/i3/2124039312/TB2_OZUxbArBKNjSZFLXXc_dVXa_!!2124039312-0-item_pic.jpg_80x80.jpg',
                            money: '￥96.90'
                        }])
                }
                this.loading = false;
                this.finished = true;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
